<template>
	<view>
		<!-- 姓名 -->
		<view class="row distance">
			<view class="left">
				<text class="red">*</text>
				<text space="nbsp">姓      名</text>
			</view>

			<view class="right">
				<input class="inp" type="text" name="consultants" v-model="consultants" />
			</view>
		</view>

		<!-- 性别 -->
		<view class="row top">
			<view class="left">
				<text class="red">*</text>
				<text space="nbsp">性      别</text>
			</view>
			<view class="right">
				<image class="xialakuang" src="/static/image/sanjiaoxing-l@2x.png"></image>
				<view>

					<picker v-model="gender" class="choose" mode="selector" :range="sexList" :value="gender"
						@change="pickerChange">
						<view>{{sexList[gender]}}</view>
					</picker>

				</view>
			</view>
		</view>

		<!-- 年龄 -->
		<view class="row from">
			<view class="left">
				<text class="red">*</text>
				<text space="nbsp">年      龄</text>
			</view>
			<view class="right">
				<input class="inp" type="number" v-model="age" />
			</view>
		</view>

		<!-- 电话号码 -->
		<view class="row top">
			<view class="left">
				<text class="red">*</text>
				<text>电话号码</text>
			</view>

			<view class="right">
				<input class="inp" type="number" v-model="phone" />
			</view>
		</view>

		<!-- 身份证号 -->
		<view class="row top">
			<view class="left">
				<text class="red">*</text>
				<text>身份证号</text>
			</view>

			<view class="right">
				<input class="inp" type="number" v-model="idCard" />
			</view>
		</view>

		<!-- 意向产品 -->
		<view class="row  top">
			<view class="left">
				<text>意向产品</text>
			</view>
			<view class="right">
				<image class="xialakuang" src="/static/image/sanjiaoxing-l@2x.png"></image>
				<view>

					<picker class="choose" mode='selector' :range="shortList" :value="Short" @change="bindPickerChange"
						:range-key="'cardName'" :key="Short">
						<view>{{cardName}}</view>
					</picker>

				</view>
			</view>
		</view>

		<!-- 产品意向序号 -->
		<view class="row top" v-show="salesPlanId == null">
			<view class="left">
				<text space="nbsp">序      号</text>
			</view>
			<view class="right">
				<input class="inp" type="text" v-model="salesPlanId" disabled="true" />
			</view>
		</view>

		<!-- 客户级别 -->
		<view class="row from">
			<view class="left">
				<text space="nbsp">客户级别</text>
			</view>
			<view class="right">
				<image class="xialakuang" src="/static/image/sanjiaoxing-l@2x.png"></image>
				<view>

					<picker class="choose" mode="selector" :range="manLevelNameList"
						@change="manLevelNamebindPickerChange" :range-key="'levelName'">
						<!-- <view>{{manLevelNameList[manLevel].levelName}}</view> -->
						<text>{{levelName}}</text>
					</picker>

				</view>
			</view>
		</view>

		<!-- 客户级别序号 -->
		<!-- <view class="row top" v-show="manLevelId == null">
			<view class="left">
				<text space="nbsp">序      号</text>
			</view>
			<view class="right">
				<input class="inp" type="text" v-model="manLevelId" disabled="true" />
			</view>
		</view> -->

		<!-- 职业 -->
		<view class="row from">
			<view class="left">
				<text space="nbsp">职      业</text>
			</view>
			<view class="right">
				<input class="inp" type="text" v-model="job" />
			</view>
		</view>

		<!-- 车辆 -->
		<view class="row  top">
			<view class="left">
				<text space="nbsp">车      辆</text>
			</view>
			<view class="right">
				<input class="inp" type="text" v-model="carInfo" />
			</view>
		</view>

		<!-- 穿着 -->
		<view class="row  top">
			<view class="left">
				<text space="nbsp">穿      着</text>
			</view>
			<view class="right">
				<input class="inp" type="text" v-model="dressedIn" />
			</view>
		</view>

		<!-- 来访时间 -->
		<view class="row top">
			<view class="left">
				<text>来访时间</text>
			</view>
			<view class="right">
				<!-- <image class="xialakuang" src="/static/image/sanjiaoxing-gray.png"></image> -->
				<view class="timeT">

					<button class="button" @click="onShowDatePicker('visitDateTime')">{{visitDateTime}}</button>

				</view>

				<mx-date-picker :show="showPicker" :type="type" :value="value" :show-tips="true" :begin-text="'开始'"
					:end-text="'起止'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />

			</view>
		</view>

		<!-- 备注 -->
		<view class="row from">
			<view class="left">
				<text space="nbsp" class="label-text">备      注：</text>
			</view>
		</view>
		<view class="right2">
			<textarea class="beizhu" type="text" v-model="content" placeholder="此处选填客户的需求或者目的(0~140字)"></textarea>
		</view>

		<!-- 接待人 -->
		<view class="row from" v-show="jiedai == 1">
			<view class="left">
				<text space="nbsp">接待人</text>
			</view>
			<view class="right" v-model="jiedai">
				<text class="jiedai">{{receptionistId}}</text>
			</view>
		</view>

		<view class="row from" v-show="jiedai == 1">
			<view class="left">
				<text space="nbsp">接待人</text>
			</view>
			<view class="right" v-model="jiedai">
				<text class="jiedai">{{receptionistMan}}</text>
			</view>
		</view>

		<button class="sub_button" @click="confirm()">提交</button>
	</view>

</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datetimepicker.vue";
	import getDateTime from '@/static/js/getDateTime.js';

	export default {

		components: {
			MxDatePicker
		},

		data() {

			return {
				//时间
				showPicker: false,
				visitDateTime: '',
				type: '',
				value: '',

				//性别
				sexList: ["男", "女"],
				//性别结束

				//manLevelName
				manLevelNameList: [],
				levelName: '',

				// 意向产品planShortName
				shortList: [],
				cardName: '',
				Short: 0,

				jiedai: '',

				//字段
				// consultId: '', //id
				consultants: '', //姓名
				gender: null, //性别
				age: '', //年龄
				phone: '', //电话号码
				idCard: '', //身份证号
				manLevelId: 0, //客户级别序号
				manLevelName: '', //客户级别
				dressedIn: '', //穿着
				job: '', //职业
				carInfo: '', //车辆
				visitDate: '', //来访日期
				createdTime: '', //来访时间
				salesPlanId: 0, //意向产品id
				planShortName: '', //意向产品
				shortName: '',
				levelName: '',
				receptionistMan: '', //接待人
				receptionistId: '', //接待人
				content: '',
			}
		},

		//显示当前时间
		onLoad(option) {
			this.userName()
			this.getShort(); //调用
			this.getLevel(); //调用
			var timeStr = getDateTime.dateTimeStr('y-m-d h:i:s'); // y:年 m:月 d:日 h:时 i:分 s:秒 中间的分割符号可更改
			this.visitDateTime = timeStr
		},

		methods: {

			onPullDownRefresh() {
				// console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},

			//打印数据
			confirm() {

				if (this.consultants == '') {
					// console.log("请输入您的姓名！")
					uni.showToast({
						title: "请输入姓名！",
						icon: "none"
					})
					return;
				} else if (this.gender == null) {
					uni.showToast({
						title: "请选择性别！",
						icon: "none"
					})
					return;
				} else if (this.age == '') {
					uni.showToast({
						title: "请输入年龄！",
						icon: "none"
					})
					return;
				} else if (!(/^[0-9]+$/.test(this.age)) || this.age < 0 || this.age > 100) {
					uni.showToast({
						title: "输入的年龄在0~150岁之间！",
						icon: "none"
					})
					return;
				} else if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号！",
						icon: "none"
					})
					return;
				} else if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: "手机号格式不对！",
						icon: "none"
					})
					return;
				} else if (this.idCard == '') {
					uni.showToast({
						title: "请输入身份证号！",
						icon: "none"
					})
					return;
				} else if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(this.idCard))) {
					uni.showToast({
						title: "身份证号格式不对！",
						icon: "none"
					})
					return;
				} 
				// else if (this.salesPlanId == 0) {
				// 	uni.showToast({
				// 		title: "请选择",
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				// else if (this.manLevelId == 0) {
				// 	uni.showToast({
				// 		title: "请选择",
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				// console.log("姓名：" + this.consultants + ",  性别：" + this.gender + ",  年龄：" + this.age + ",  电话号码：" + this
				// 	.phone +
				// 	",  职业：" + this.job + ",  来访时间：" + this.visitDateTime + ",  意向产品：" +
				// 	this.cardName + ", 接待人Id：" +
				// 	this.receptionistId + ", 接待人：" +
				// 	this.receptionistMan + ", 备注：" + this.content)
				this.getName()
				uni.showToast({
					title: "添加成功",
					icon: "none",
					duration: 1000
				});
				setTimeout(function() {
					uni.navigateBack({
						url: "/pages/visitingRegistration/visitingRegistration",
					});
				}, 1000)

			},

			//性别值
			pickerChange(e) {
				this.gender = e.target.value;
				// console.log(this.gender)
			},
			async getSex() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/control/consult/?gender=' + this.gender,
						method: "get",
					})
				// console.log(res.msg)
				// this.addressData = res.body.saleConsults.data
				// console.log(this.addressData)
			},

			//客户级别
			async getLevel() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/manLevel/',
						method: "get",
					})
				// console.log(res.msg)
				this.manLevelNameList = res.body.saleManLevel.data;

				// let manLevelNameList = res.body.saleManLevel.data;
				// manLevelNameList.unshift({
				// 	levelName: '请选择',
				// })
			},
			async getManLevel() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/control/consult/?manLevelName=' + this.levelName,
						method: "get",
					})
				// console.log(res.msg)
			},
			manLevelNamebindPickerChange(e) {
				this.manLevelId = e.target.value
				// if (this.manLevelId == 0) {
				// 	uni.showToast({
				// 		title: "请选择",
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				this.levelName = this.manLevelNameList[this.manLevelId].levelName;
				this.getManLevel();
			},

			//意向产品
			bindPickerChange(e) { //获取picker里面的值
				this.salesPlanId = e.target.value
				if (this.salesPlanId == 0) {
					uni.showToast({
						title: "请选择",
						icon: "none"
					})
					return;
				}
				// console.log("order=" + this.order)
				this.shortName = this.shortList[this.salesPlanId].shortName
				this.cardName = this.shortList[this.salesPlanId].cardName.toString();
				// console.log("cardName=" + this.cardName)
				// this.getPlan()
			},
			async getPlan() {
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/control/consult/?planShortName=' + this.cardName,
						method: "get",
					})
				// console.log(res.msg)
			},
			async getShort() { //要到产品列表的数据
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: '/api-sale/config/plan/',
						method: "get",
					})
				// console.log(res.msg)
				this.shortList = res.body.salePlan.data;

				for (let i = 0; i < this.shortList.length; i++) {
					this.shortList[i].cardName = this.shortList[i].cardName + "-" + this.shortList[i].shortName
				}
				let shortList = res.body.salePlan.data;
				shortList.unshift({
					cardName: '请选择',
					// arr.slice(1),
				})
			},

			//获取接待人id
			userName() {
				this.receptionistId = uni.getStorageSync('id');
				this.receptionistMan = uni.getStorageSync('loginName');
			},

			//接口
			async getName() {
				// console.log("url阶段" + Astatus)
				const res = await this
					.$myRequest({ //await 关键字 只能放在 async 函数内部， await关键字的作用 就是获取 Promise中返回的内容， 获取的是Promise函数中resolve或者reject的值
						url: "/api-sale/control/consult/saveByMobile",
						method: "post",
						data: {
							consultants: this.consultants,
							gender: this.gender,
							age: this.age,
							phone: this.phone,
							idCard: this.idCard,
							manLevelName: this.levelName,
							job: this.job,
							visitDate: this.visitDateTime,
							salesPlanId: this.salesPlanId,
							planShortName: this.cardName,
							carInfo: this.carInfo,
							dressedIn: this.dressedIn,
							receptionistId: this.receptionistId,
							receptionistMan: this.receptionistMan,
							content: this.content
						}
					});
				// console.log(res.msg)
				// this.visitingRegistrationList = res.body.saleConsults
			},

			//时间
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					// console.log('value => ' + e.value);
					//原始的Date对象
					// console.log('date => ' + e.date);
				}
			},

		},
	}
</script>

<style>
	page {
		background-color: #ebeff6;
	}

	.row {
		width: 100%;
		height: 88rpx;
		display: flex;
		line-height: 88rpx;
		background-color: #FFFFFF;
		position: relative;
	}

	.left {
		width: 184rpx;
		margin-left: 8rpx;
		height: 88rpx;
		background-color: #FFFFFF;
		position: relative;
		font-size: 32rpx;
		text-align: right;
	}

	.red {
		color: red;
	}

	.right {
		width: 98%;
		margin-right: 12rpx;
		height: 88rpx;
		background-color: #FFFFFF;
		position: relative;
	}

	.inp {
		width: 88%;
		height: 66rpx;
		font-size: 32rpx;
		line-height: normal;
		margin-top: 10rpx;
		margin-left: 70rpx;
		text-align: left;
		float: right;
	}

	.xialakuang {
		width: 30rpx;
		height: 22rpx;
		display: flex;
		margin-top: 36rpx;
		margin-right: 14rpx;
		float: right;
		pointer-events: none;
		color: #333333;
	}

	.choose {
		width: 88.5%;
		height: 88rpx;
		font-size: 32rpx;
		float: right;
		margin-right: -38rpx;
		border: 0rpx solid;
	}

	.content {
		width: 100%;
		height: 66rpx;
		font-size: 32rpx;
		background-color: #FFFFFF;
	}

	.input {
		margin-left: 56rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.jiedai {
		width: 88%;
		height: 66rpx;
		font-size: 32rpx;
		line-height: normal;
		color: #8F8F94;
		margin-top: 24rpx;
		margin-left: 70rpx;
		text-align: left;
		float: right;
	}

	.distance {
		margin-top: 12rpx;
	}

	.top {
		margin-top: 4rpx;
	}

	.from {
		margin-top: 20rpx;
	}

	.timeZ {
		text-align: center;
		justify-content: space-around;
	}

	.timeT {
		width: 90%;
		font-size: 32rpx;
		text-align: right;
		margin-left: 10%;
		text-align: left;
	}

	.button {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		/* color: #8F8F94; */
		float: left;
		text-align: left;
		margin-right: -38rpx;
		background-color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	.label-text {
		margin-right: 4rpx;
	}

	.right2 {
		width: 100%;
		margin-right: 12rpx;
		height: 188rpx;
		background-color: #FFFFFF;
		position: relative;
	}


	.beizhu {
		width: 84%;
		height: 184rpx;
		word-break: break-all;
		margin-left: 86rpx;
		font-size: 32rpx;
	}

	.receptionists {
		text-align: right;
	}
	
	.sub_button{
		margin: 64rpx auto;
	}
	
</style>